<script setup lang="ts">
import router from '@/router';
import { useChannelStore } from '@/stores/channel';
import type { ArticleItem, ArticleResData } from '@/types/data';
import axios from 'axios';
import { ref, watch } from 'vue';
import { useRouter } from 'vue-router';

// 问pinia(菠萝)要id
const store = useChannelStore()

const articles = ref<ArticleItem[]>([]);

// 观察数据改变，执行自定义逻辑
watch(
  () => store.channelId,
  async () => {
    const res = await axios.get<ArticleResData>(
      `http://geek.itheima.net/v1_0/articles`,
      {
        params: {
          // channel_id: props.channelId,
          channel_id: store.channelId,
          timestamp: Date.now(),
        },
      },
    );
    articles.value = res.data.data.results;
  },

  //立刻执行 
  { immediate: true }
)

const route=useRouter()
// 去详情
const toDetail=(id:string)=>{
route.push({
  path:'/detail',
  query:{
    id:id
  }
})
}
</script>

<template>
  <div class="article-list">
    <div class="article-item" v-for="item in articles" :key="item.art_id" @click="toDetail(item.art_id)">
      <p class="title">{{ item.title }}</p>
      <template v-if="item.cover.cover>0">
        <img
        v-for="(src, i) in item.cover.images"
        :key="i"
        class="img"
        :src="src"
        alt=""
      />
      </template>
      
      <div class="info">
        <span>{{ item.aut_name }}</span>
        <span>{{ item.comm_count }}评论</span>
        <span>{{ item.pubdate }}</span>
      </div>
    </div>
  </div>
</template>